import React, { useCallback } from 'react'
import { SimpleSelector } from './simpleSelector'
import { connect } from 'react-redux'
import { getCommonAllPagesSelector } from '../../selectors/baseSelector'

const maStateToProps = state => {
    return {
        allPages: getCommonAllPagesSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
    }
}

export const PageSelector = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { showNoLimitItem, initValue, onSelectItem, readOnly, allPages } = props
    const dataSource = (showNoLimitItem ? [{ name: '', title: '[不限页面]' }] : []).concat(allPages.map(page => ({ name: page.name, title: page.name })), [])
    const filterDataSource = React.useCallback(value => item => item.name.toUpperCase().includes(value.toUpperCase()), [])
    const getItemValue = React.useCallback(item => item.name, [])
    const renderItem = React.useCallback(item => item.title, [])
    const wrapOnSelectItem = useCallback(item => onSelectItem(item.name), [onSelectItem])

    return <SimpleSelector dataSource={dataSource} filterDataSource={filterDataSource}
        getItemValue={getItemValue} initValue={initValue} onSelectItem={wrapOnSelectItem}
        readOnly={readOnly} renderItem={renderItem} />
})